<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="600px" @close="emits('closeDialogEdit')">
    <el-form ref="dialogFormRef" :model="dialogFormEdit" :rules="rules">
            <div>
            <el-form-item label="付款银行" :label-width="formLabelWidth" prop="send_bank">
                <el-input v-model="dialogFormEdit.send_bank" />
            </el-form-item>
            <el-form-item label="付款银行账号" :label-width="formLabelWidth" prop="send_card_number">
                <el-input v-model="dialogFormEdit.send_card_number" />
            </el-form-item>
            <el-form-item label="付款人" :label-width="formLabelWidth" prop="send_card_name">
                <el-input v-model="dialogFormEdit.send_card_name" />
            </el-form-item>
            <el-form-item label="付款时间" :label-width="formLabelWidth" prop="send_pay_time">
                <!-- <el-input v-model="dialogFormEdit.send_pay_time" /> -->
                <el-date-picker clearable v-model="dialogFormEdit.send_pay_time" type="datetime" />
            </el-form-item>
            <el-form-item label="付款方式" :label-width="formLabelWidth" prop="payment_way">
                <el-input v-model="dialogFormEdit.payment_way" />
            </el-form-item>
            <el-form-item label="付款凭证流水号" :label-width="formLabelWidth" prop="payment_order_no">
                <el-input v-model="dialogFormEdit.payment_order_no" />
            </el-form-item>
            <!--<el-form-item label="支付凭证图片" :label-width="formLabelWidth">-->
            <!--    <el-upload-->
            <!--      :action="uploadimgUrl"-->
            <!--      :data="{ project_code: 'pay_service' }"-->
            <!--      :show-file-list="false"-->
            <!--      :on-success="handleUploaderImgSuccess"-->
            <!--      :limit="1"-->
            <!--      :headers="TOKENT_HEADER"-->
            <!--      class="avatar-uploader"-->
            <!--    >-->
            <!--      <img v-if="dialogFormEdit.payment_image" :src="dialogFormEdit.payment_image_show" class="avatar" />-->
            <!--      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
            <!--    </el-upload>-->
            <!--</el-form-item>-->
          </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancelEdit')">取消</el-button>
                <el-button type="primary" @click="submitEdit(dialogFormEdit)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { formatDates } from "@/utils/utils";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";

const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogFormEdit: {
        type: Object,
        default: {
            id: "",
            send_bank: "",
            send_card_number: "",
            send_card_name: "",
            payment_way: "",
            payment_order_no: "",
            payment_image: "",
            payment_image_show: "",
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    },
    btnType: {type: String, default: ""},
});
const emits = defineEmits(["closeDialogEdit", "cancelEdit", "submitFormEdit", "handleUploaderImgRequest"]);
const handleUploaderImgSuccess = (res) => {
    emits("handleUploaderImgRequest", res, "payment_image_show");
};
const formLabelWidth = "140px";
// 校验
const rules = {
    send_bank: [{ required: true, message: "请输入付款银行", trigger: "blur" }],
    send_card_number: [{ required: true, message: "请输入付款银行账号", trigger: "blur" }],
    send_card_name: [{ required: true, message: "请输入付款人", trigger: "blur" }],
//    payment_image: [{ required: true, message: "请上传支付凭证图片", trigger: "blur" }],
};
// 提交
const submitEdit = dialogFormEdit => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, {
                    id: dialogFormEdit.id,
                    send_bank: dialogFormEdit.send_bank,
                    send_card_number: dialogFormEdit.send_card_number,
                    send_card_name: dialogFormEdit.send_card_name,
                    payment_way: dialogFormEdit.payment_way,
                    payment_order_no: dialogFormEdit.payment_order_no,
                    payment_image: dialogFormEdit.payment_image,
                });
                emits("submitFormEdit", param);
            } catch (error) {
                return false;
            }
        })
        .catch(error => {
            return false;
        });
};
</script>
  